<!DOCTYPE html>
<html lang="en" style="background-color: #808080;">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <style>
        .main{
            text-align: center;
            background-color: #fff;
            border-radius: 20px;
            width: 600px;
            height: 350px;
            margin: auto;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            box-shadow: 5px 5px 10px gray;
            }
        button:nth-child(1){
            margin-right: 172px;
            margin-top: 5px;
        } 
    </style>
</head>
<body>
    <section name="search_part">
        <div class="main">
            <div style="margin: 10px;">
                <a href="joinus.html">
                    <img src="../img/favicon.ico" alt="" style="width: 15%;">
                </a>
            </div>
            <form action="joinus.html" method="post">
                <br>
                <div>
                    <label for="username">输入用户</label>
                    <input type="text" name="username"
                    style="height: 25px;width: 300px;" 
                    required>
                </div>
                <br>
                <div>
                    <label for="password">输入密码</label>
                    <input type="password" name="password" 
                    style="height: 25px;width: 300px;" id="pw1"
                    required>
                </div>
                <br>
                <div>
                    <label for="password">确认密码</label>
                    <input type="password" name="password" 
                    style="height: 25px;width: 300px;" id="pw2"
                    required placeholder="请再次填写密码" onkeyup="check_ok()">
                </div>
                <span id="tishi"></span>
                <br>

                <div>
                    <button type="submit" 
                    style="height: 35px;width: 100px;background-color: blue;border-radius: 5px;border-color: blue;" 
                    id="submit" onclick="register_ok()">
                        <a href="login3.html" style="text-decoration:none;color: #fff;">注册</a>
                    </button>

                    <button type="reset" style="height: 35px;width: 100px;
                    background-color:cadetblue;border-radius: 5px;color: #fff;border-color: cadetblue;">
                    重置
                    </button>
                    
                </div>
            </form>
        </div>
    </section>
    <script>
        function check_ok() {
            var pw1 = document.getElementById("pw1").value;
            var pw2 = document.getElementById("pw2").value;
            if(pw1 == pw2) {
                document.getElementById("tishi").innerHTML="<font color='green'>两次密码相同</font>";
                document.getElementById("submit").disabled = false;
            }
            else {
                document.getElementById("tishi").innerHTML="<font color='red'>两次密码不相同</font>";
                document.getElementById("submit").disabled = true;
            }
        }
        function register_ok() {
            var pw1 = document.getElementById("pw1").value;
            var pw2 = document.getElementById("pw2").value;
            if(pw1 == pw2) {
                alert("注册成功！");
            }
            else{
                alert("两次密码不相同！");
                window.location.href='./register.html';
            }
        }

    </script>

</body>
</html>
